<template>
	<Transition name="messageboxitem">
		<div class="message-box-item" :class="store.message.latest?.type" v-show="show">
			<div class="type"></div>
			<span class="text beyond-hiding">{{ store.message.latest?.message }}</span>
		</div>
	</Transition>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRootStore } from '@v/store';

const store = useRootStore();

let show = ref(false);

onMounted(() => {
	show.value = true;
});
</script>

<style scoped lang="scss">
.message-box-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #fff;
	height: 100%;
	width: 100%;
	user-select: none;
	&.info {
		--main-color: #70a1ff;
	}
	&.success {
		--main-color: #0dbc75;
	}
	&.warning {
		--main-color: #fff200;
	}
	&.error {
		--main-color: #eb4a4a;
	}
	.type {
		width: 4px;
		height: 1em;
		background-color: var(--main-color);
		margin: 0 2px;
		border-radius: 1px;
	}
	.text {
		width: calc(100% - 6px);
		line-height: 24px;
		vertical-align: baseline;
	}
}
</style>
